<%--
  Created by IntelliJ IDEA.
  User: 92329
  Date: 2018/4/17
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common.jspf"%>
<html>
<head>
    <title>特色管理</title>
    <script>
        function load() {
            $.ajax({
                url: "${hkxyPath}/feature/feature-list-json",
                type: "post",
                dataType: "json",
                success:function (result) {
                    var html="";
                    if(result==""){
                        $("#featureList").html("<li class='list-group-item'><p>暂时没有数据，请添加数据！</p></li>")
                    }
                    else{
                        $.each(result,function (i,val) {
                            html+="<li name'featureli' class='list-group-item row featureli'>" +
                                "<div class='featureimg col-sm-2'>" +
                                    "<img style='height: auto;width: 100%;' src="+val.imgurl+">" +
                                    "<div class='btn-group'>" +
                                        "<button type='button' class='btn btn-link ' data-toggle='modal' data-target='#modifyFeatureModal' onclick='modefiyFeature("+val.id+")'>修改</button>" +
                                        "<button type='button' class='btn btn-link' onclick='deleteFeature("+val.id+")'>删除</button>" +
                                    "</div>" +
                                "</div>" +
                                "<div class='col-sm-9' style='padding-left: 20px'>" +
                                    "<h3>"+val.title+"</h3>" +
                                    "<p>"+val.intro+"</p>" +

                                "</div>" +
                                "</li>";
                        });
                        $("#featureList").html(html);
                    }
                    check();
                },
                error:function () {

                }
            });
        }
        function check() {
            var count =$(".featureli").length;
            console.log(count);
            if(count>=6){
                $("#addFeatureBtn").hide();
                $("#addFeatureBtn2").show();
            }else{
                $("#addFeatureBtn").show();
                $("#addFeatureBtn2").hide();
            }
        }
        $(function () {
            load();
        });
        function imgPreview(obj,img) {
            var imgid="#"+img;
            var pic=obj.files[0];
            var reader=new FileReader();
            reader.readAsDataURL(pic);
            reader.onload=function (e) {
                $(imgid).attr("src",this.result).show();
            }
        }
        function addFeature() {
            var formData = new FormData($("#addFeatureForm")[0]);
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "${hkxyPath}/feature/feature-add" ,
                data: formData ,
                contentType: false,     //这个一定要写
                processData: false,    //这个一定要写
                success: function (result) {
                    load();
                    tips(1);
                },
                error:function (){
                    load();
                    tips(0);
                }
            });
        }
        function modefiyFeature(id) {
            $.post("${hkxyPath}/feature/feature-json/"+id,function (result) {
                console.log(result);
                var feature=result;
                $("#img2").attr("src",feature.imgurl).show();
                $("#title").val(feature.title);
                $("#intro").val(feature.intro);
                $("#modifyBtn").val(feature.id);
            });
        }
        function deleteFeature(id) {
            var c=confirm("删除后不可恢复！\n确认删除？？？");
            if(c){
                $.post("${hkxyPath}/feature/feature-delete",{id:id},function (result) {
                    var code=result.code;
                    if(code==1){
                        load();
                        tips(1);
                    }else {
                        load();
                        tips(0);
                    }
                })
            }
        }
        function domodifyFeature(id) {
            var formData = new FormData($("#modifyFeatureForm")[0]);
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "${hkxyPath}/feature/feature-modify/"+id,
                contentType: false,     //这个一定要写
                processData: false,    //这个一定要写
                data:formData,
                success:function (result) {
                    var code=result.code;
                    if(code==1){
                        load();
                        tips(1);
                    }else {
                        load();
                        tips(0);
                    }
                }
        });
        }
    </script>
</head>
<body>
    <!-- tips -->
    <%@include file="tips.jspf"%>
    <!-- Head -->
    <div class="header-bottom-my1">
        <h2>特色展示管理</h2>
    </div>
    <!-- Button -->
    <div class="padding-5">
        <button class='btn btn-primary' id="addFeatureBtn" data-toggle="modal" data-target="#addFeatureModal" hidden>＋添加</button>
        <button class='btn btn-default disabled' id="addFeatureBtn2" hidden>不可添加</button>
        <p id="addtip" class="help-block" hidden> · 最多可以添加6个特色！</p>
    </div>
    <!-- List -->
    <div class="padding-5">
        <ul id="featureList" class="list-group" style="padding-top: 10px;padding-bottom: 10px">

        </ul>
    </div>

    <!-- Model add -->
    <div class="modal fade" id="addFeatureModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="modalLabel">添加特色</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="addFeatureForm">
                        <div class="form-group ">
                            <label for="img1">图片：</label>
                            <div style="width: 200px;height: 150px;">
                                <img id="img1" src="#" class="imgpreview">
                            </div>
                            <input type="file" name="image" onchange="imgPreview(this,'img1')">
                        </div>
                        <div class="form-group">
                            <label for="title">标题：</label>
                            <input type="text" class="form-control" name="title" maxlength="10" placeholder="写一个简短的标题（10字以内）">
                        </div>
                        <div class="form-group">
                            <label for="intro">简介：</label>
                            <textarea class="form-control" name="intro" maxlength="100" rows="5"></textarea>
                            <span class="pull-right help-block">100字以内</span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addFeature()" >
                        提交
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- Model modify-->
    <div class="modal fade" id="modifyFeatureModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">修改特色</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="modifyFeatureForm">
                        <div class="form-group ">
                            <label for="img2">图片：</label>
                            <div style="width: 200px;height: 150px;">
                                <img id="img2" src="#" class="imgpreview">
                            </div>
                            <input type="file" id="inputfile" name="image" onchange="imgPreview(this,'img2')">
                        </div>
                        <div class="form-group">
                            <label for="title">标题：</label>
                            <input type="text" id="title" class="form-control" maxlength="10" name="title" placeholder="写一个简短的标题（10字以内）">
                        </div>
                        <div class="form-group">
                            <label for="intro">简介：</label>
                            <textarea class="form-control" name="intro" id="intro" maxlength="100" rows="4"></textarea>
                            <span class="pull-right help-block">100字以内</span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" id="modifyBtn" class="btn btn-primary" data-dismiss="modal" onclick="domodifyFeature(this.value)" >
                        提交
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>
